<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title></title>
    <style>
        body,div,ul,li,a,p,img,form,input,h3 {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            text-decoration: none;
            color: #000;
            font-size: 14px;
        }
        html,body {
            width: 100%;
            height: 100%;
        }
        .jd_product {
            width: 100%;
            height: 100%;
        }
        .header {
            width: 100%;
            height: 50px;
            position: fixed;
            background-color: #eee;
            border-bottom: 1px solid #ccc;
        }
        .header_back,
        .header_menu{
            width: 50px;
            height: 50px;
            display: block;
            position: absolute;
            background: url("images/sprites.png")no-repeat;
            background-size: 200px 200px;
            padding: 15px ;
            background-origin: content-box;
            background-clip: content-box;
        }
        .header_back {
            background-position: -20px 0;
            left: 0;
        }
        .header_menu {
            background-position: -60px 0;
            right: 0;
            top: 0;
        }
        .seach {
            width: 100%;
            height: 100%;
            padding: 0 60px;
        }
        .seach > input {
            width: 100%;
            height: 40px;
            border-radius: 5px;
            margin-top: 5px;
            padding-left: 10px;
            outline: none;
            border: 1px solid #ccc;
            color: #666;
            font-size: 16px;
        }
        .content {
            width: 100%;
            height: 100%;
            padding-top: 50px;
        }
        .content_left {
            width: 100px;
            height: 100%;
            float: left;
            overflow: hidden;
            position: relative;
            background-color: #ff4500;
        }
        .content_left > .content_list {
            width: 100%;
            list-style: none;
            position: absolute;
            top: 0;
        }
        .content_left > ul li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }
        .content_left li a {
            width: 100%;
            height: 100%;
            display: block;
            color: #000;
            font-size: 14px;
            border-right: 1px solid #ccc;
        }
        .content_left li.active a {
            color: red;
            background-color: #fff;
            border-right: 0;
        }
        .content_right {
            height: 100%;
            margin-left: 100px;
            display: flex;
            flex-direction: column;
        }
        .content_right .bg {
            width: 100%;
            display: block;
        }
        .content_right .bg img {
            width: 100%;
            display: block;
        }
        .content_right h3 {
            width: 100%;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            padding-left: 10px;
            border-bottom: 1px solid #ccc;
        }
        .content_right .shirt {
            width: 100%;
            flex: 1;
            overflow: hidden;
            position: relative;
        }
        .content_right .shirt li {
            width: 33.333%;
            list-style: none;
            float: left;
            text-align: center;
        }
        .content_right .shirt li a {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
    <script src="js/iscroll.js"></script>
    <script src="js/fastclick.js"></script>
    <script>
        window.onload = function () {

                var content_left = document.querySelector('.content_left');
                var ulBox = content_left.querySelector('.content_list');
                //获取左边盒子的高度
                var leftHeight = content_left.offsetHeight;
                //获取左边ul盒子的高度
                var ulBoxHeight = ulBox.offsetHeight;
                //设置变量记录每次移动后的位置
                var currentY = 0;
                //设置静态时候最多和最少的移动距离
                var maxTop = 0;
                var minTop = leftHeight - ulBoxHeight;
//            console.log(minTop)
                //动态滑动时的最大和最小移动距离，设定为100px
                var maxMoveTop = maxTop + 100;
                var minMoveTop = minTop - 100;
                var startY,moveY,distanceY;
                //触摸事件(ulBox在此电脑模拟时没有效果，替换为window，最总需要改为ulBox)
                ulBox.addEventListener('touchstart', function (e) {
                    //获取初始坐标
                    startY = e.targetTouches[0].clientY
                })
                ulBox.addEventListener('touchmove', function (e) {
                    moveY = e.targetTouches[0].clientY;
                    distanceY = moveY - startY;
                    //判断如果滑动的距离大于限制的最大或者小于最小值，直接跳出，阻止继续滑动
                    if (distanceY + currentY > maxMoveTop || distanceY + currentY < minMoveTop) {
                        return;
                    }
                    ulBox.style.transition = 'none';
                    ulBox.style.top = distanceY + currentY + 'px';
                })
                ulBox.addEventListener('touchend', function (e) {
                    //如果滑动的距离大于静态时的限制，而小于滑动时的限制，则让页面回弹
                    if (distanceY + currentY > maxTop) {
                        ulBox.style.transition = 'top 0.5s ease-in-out';
                        ulBox.style.top = maxTop + 'px';
                        //从新记录当前的currentY的值
                        currentY = maxTop;
                    } else if (distanceY + currentY < minTop) {
                        ulBox.style.transition = 'top 0.5s ease-in-out';
                        ulBox.style.top = minTop + 'px';
                        currentY = minTop;
                    } else {
                        //记录当前移动的距离，防止下次触摸时从新从原位置开始
                        currentY += distanceY
                    }
                })
                //封装轻触事件
                /*var itcast = {
                    tap: function (dom,callback) {
                        //判断传入的是否是dom元素以及是否是一个对象
                        if (!dom || typeof dom != 'object') {
                            return;
                        }
                        var startX,startY,endX,endY;
                        var startTime;
                        dom.addEventListener('touchstart', function (e) {
                            //判断是几个手指进行触摸
                            if (e.targetTouches.length > 1) {
                                return;
                            }
                            //记录接触时的时间
                            startTime = Date.now();
                            startX = e.targetTouches[0].clientX;
                            startY = e.targetTouches[0].clientY;
                        })
                        dom.addEventListener('touchend', function (e) {
                            //判断离开时是介个手指进行的触摸
                            if (e.changedTouches.length > 1) {
                                return
                            }
                            //判断总共触摸时间是否大于150，（借鉴的值）
                            if (Date.now() - startTime > 150) {
                                return
                            }
                            //判断触摸时移动的范围值
                            endX = e.changedTouches[0].clientX;
                            endY = e.changedTouches[0].clientY;
                            if (Math.abs(endX - startX) < 6 && Math.abs(endY - startY) < 6) {
                                console.log('轻触事件')
                                //执行tap方法后，响应的操作
                                //判断是否传入了一个回调函数
                                callback && callback(e)
                            }
                        })
                    }
                }*/
                var lis = ulBox.querySelectorAll('li');
                //调用itcast对象的tap方法，进行轻触，利用事件冒泡对li进行事件注册
                /*itcast.tap(ulBox, function (e) {
                    //清除所有样式，排他
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].classList.remove('active');
                        //给每一个li标签添加索引值
                        lis[i].index = i
                    }
                    //事件
//                    console.log(e.target)  实际的事件是a标签
                    var li = e.target.parentNode;
                    li.classList.add('active');
                    var liHeight = li.offsetHeight;
                    //如果滑动的距离大于静态的最小值，就执行动画，小于就停止
                    if (-li.index * liHeight < minTop) {
                        ulBox.style.transition = 'top 0.5s';
                        ulBox.style.top = minTop+ 'px';
                        currentY = minTop;
                    } else {
                        ulBox.style.transition = 'top 0.5s';
                        ulBox.style.top = -li.index * liHeight + 'px';
                        currentY = -li.index * liHeight;
                    }
                })*/
                //运用fastclick插件进行点击事件
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
                ulBox.addEventListener('click', function (e) {
                    //清除所有样式，排他
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].classList.remove('active');
                        //给每一个li标签添加索引值
                        lis[i].index = i
                    }
                    //事件
//                    console.log(e.target)  实际的事件是a标签
                    var li = e.target.parentNode;
                    li.classList.add('active');
                    var liHeight = li.offsetHeight;
                    //如果滑动的距离大于静态的最小值，就执行动画，小于就停止
                    if (-li.index * liHeight < minTop) {
                        ulBox.style.transition = 'top 0.5s';
                        ulBox.style.top = minTop+ 'px';
                        currentY = minTop;
                    } else {
                        ulBox.style.transition = 'top 0.5s';
                        ulBox.style.top = -li.index * liHeight + 'px';
                        currentY = -li.index * liHeight;
                    }
                })
                var myScroll = new IScroll('.shirt',{
                    mouseWheel: true,
                    scrollbars: true
                });
        }
    </script>
</head>
<body>
    <div class="jd_product">
        <div class="header">
            <a href="javascript:;" class="header_back"></a>
            <form action="" class="seach">
                <input type="text" placeholder="请输入商品名称"/>
            </form>
            <a href="javascript:;" class="header_menu"></a>
        </div>
        <div class="content">
            <div class="content_left">
                <ul class="content_list">
                    <li class=""><a href="javascript:;">热门推荐</a></li>
                    <li class="active"><a href="javascript:;">潮流女装</a></li>
                    <li class=""><a href="javascript:;">品牌男装</a></li>
                    <li class=""><a href="javascript:;">内衣配饰</a></li>
                    <li class=""><a href="javascript:;">家用电器</a></li>
                    <li class=""><a href="javascript:;">电脑办公</a></li>
                    <li class=""><a href="javascript:;">手机数码</a></li>
                    <li class=""><a href="javascript:;">母婴频道</a></li>
                    <li class=""><a href="javascript:;">图书</a></li>
                    <li class=""><a href="javascript:;">家居家纺</a></li>
                    <li class=""><a href="javascript:;">居家生活</a></li>
                    <li class=""><a href="javascript:;">家具建材</a></li>
                    <li class=""><a href="javascript:;">热门推荐</a></li>
                    <li class=""><a href="javascript:;">潮流女装</a></li>
                    <li class=""><a href="javascript:;">品牌男装</a></li>
                    <li class=""><a href="javascript:;">内衣配饰</a></li>
                    <li class=""><a href="javascript:;">家用电器</a></li>
                    <li class=""><a href="javascript:;">电脑办公</a></li>
                    <li class=""><a href="javascript:;">手机数码</a></li>
                    <li class=""><a href="javascript:;">母婴频道</a></li>
                    <li class=""><a href="javascript:;">图书</a></li>
                    <li class=""><a href="javascript:;">家居家纺</a></li>
                    <li class=""><a href="javascript:;">居家生活</a></li>
                    <li class=""><a href="javascript:;">家具建材</a></li>
                </ul>
            </div>
            <div class="content_right">
                <a href="javascript:;" class="bg">
                    <img src="images/banner_1.jpg" alt=""/>
                </a>
                <h3>热门分类</h3>
                <div class="shirt">
                    <ul style="overflow: hidden">
                        <li>
                            <a href="javascript:;">
                                <img src="./images/nv-fy.jpg" alt="">
                                <p>毛衣</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <img src="./images/nv-fy.jpg" alt="">
                                <p>毛衣</p>
                            </a>
                        </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li><li>
                        <a href="javascript:;">
                            <img src="./images/nv-fy.jpg" alt="">
                            <p>毛衣</p>
                        </a>
                    </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</body>
</html>